<!DOCTYPE html>
<html>            WERSJA 1.1 NIE ZINTEGROWANA !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! flex -moz-box
<head>
	<title data-l10n-id="timetable">Plank lekcji</title>
	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="resource" type="application/l10n" href="locales/locales.ini">
	<script type="application/javascript" src="js/l10n.js"></script>
	<link rel="stylesheet" href="style/buttons.css">
	<link rel="stylesheet" href="style/confirm.css">
	<link rel="stylesheet" href="style/headers.css">
	<link rel="stylesheet" href="style/input_areas.css">
	<link rel="stylesheet" href="style/icons.css">
	<link rel="stylesheet" href="style/switches.css">
	<link rel="stylesheet" href="style/drawer.css">
	<link rel="stylesheet" href="style/lists.css">
	<link rel="stylesheet" href="style/tabs.css">
	<link rel="stylesheet" href="transitions.css">
	<link rel="stylesheet" href="util.css">
	<style>
		#index {
			height: 100%;
		}
		#eiroomSchedule{
			position: absolute;
			top: 2rem;
			right: 3rem;
		}
		#eitypeSchedule{
			margin:-1rem 0 0 0;
			padding-left:1.5rem;
			font-size: 1.4rem;
			line-height: 2rem;
		}
		#eiteacherSchedule{
			margin:0 0 -1rem 0;
			padding-left:1.5rem;
			font-size: 1.6rem;
			line-height: 2rem;
		}
		header h2 span{
			float:right;
			font-weight: bold;
		}
		header h2 span[onclick]{
			float:right;
			font-weight: bold;
			padding: .7rem 1.2rem;
			margin-top: -.6rem;
			margin-right:-2rem;
		}
		header h2 span[onclick]:active{
			background-color:#B2F2FF;
		}
		header h2 time{
			margin-left:1rem;
			font-style:italic;
		}
		#drawer article li a p{
			color:#333;
		}
		#drawer article li a p:nth-child(1){
			font-size:1.2rem;
			line-height:6rem;
			float:left;
			padding:0;
			margin: 0 -10px 0 5px;
		}
		#drawer article li a p:nth-child(2){
			margin-bottom: -.3rem;
			padding-top: .4rem;
			font-size:1.2rem;
			line-height:1.2rem;
		}
		#drawer article li a p:nth-child(3){
			font-size:1.8rem;	
			line-height:3rem;
		}	
		#drawer article li.event a p:nth-child(3):before{
			content:"";
			font-family: "gaia-icons";
		}	
		#drawer article li a p:nth-child(4){
			font-size:1.2rem;	
			line-height:1.2rem;
		}
		#drawer article li a p span{
			font-size:1.4rem;	
			right:1rem;
			position:absolute;
		}
		.bb-tablist,.bb-tablist>li{
			height:3.5rem;
		}
		.bb-tablist > li > a{
			font-size:1.4rem;
			line-height: 4rem;
		}
		.bb-tablist:before{
			top:3.5rem;
		}
		.bb-tablist > li.selecto > a{
			color: #00aacc;
			font-weight: 500;
			background-position: 50% 100%;
		}
		.bb-tablist > li.selecto > a:after{
			display: inline-block;
			content: "";
			position: absolute;
			width: 100%;
			left: 0;
			top:0;
			height: calc(100% - 0.3rem);
			border-bottom: 0.3rem solid #00aacc;
		}
		#panelo1,#panelo2,#panelo3,#panelo4,#panelo5,#panelo6,#panelo7{
			margin-top:8.7rem;
		}
		[data-position="day"] {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 15;
			z-index: 100;
			transform: translateY(100%);
			overflow:scroll;
		}
		[data-position="day"].right {
			transform: translateY(100%);
		}
		[data-position="day"].current{
			animation: fadeIn .3s forwards;
			transform: translateY(0);
		}
		[data-position="right"] {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transform: translateX(100%);
			z-index: 15;
			z-index: 100;
		}
		section[role="region"][data-position="right"], section[role="region"][data-position="down"] {
			position: absolute;
		}
		[data-position="right"].current {
			animation: rightToCurrent 0.4s forwards;
		}
		[data-position="right"].right {
			animation: currentToRight 0.4s forwards;
		}
		[data-position="down"].current {
			animation: downToCurrent 0.4s forwards;
		}
		[data-position="down"].down {
			animation: currentToDown 0.4s forwards;
		}
		[data-position="down"].down2 {
			animation: currentToDown 0s forwards;
		}
		[data-position="current"].left {
			animation: currentToLeft 0.4s forwards;
		}
		[data-position="current"].current {
			animation: leftToCurrent 0.4s forwards;
		}
		[data-position="back"] {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
			opacity: 0;
		}
		[data-position="back"].fade-in {
			z-index: 120;
			animation: fadeIn 0.2s forwards;
		}
		[data-position="back"].fade-out {
			animation: fadeOut 0.2s forwards;
		}
		[data-position="edit-mode"] {
			position: absolute;
			top: -5rem;
			left: 0;
			right: 0;
			bottom: -7rem;
			z-index: -1;
			opacity: 0;
			transition: all 0.3s ease;
		}
		[data-position="edit-mode"].edit {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 120;
			opacity: 1;
		}
		.active {
			background-color: #b2f2ff;
			color: #fff;
		}
		#headers .content {
			margin-top: -1.5rem;
		}
		#headers section[role="region"] {
			margin-bottom: 1.5rem;
		}
		#headers section[role="region"]:not(#drawer) {
			display: inline;
		}
		#headers article header:first-child {
			margin-top: 1.5rem;
		}
		#headers section[role="region"] header h2 {
			margin: 0 0 1.5rem 0;
		}
		[data-type=list] li>a:active {
			background-color: transparent;
		}
		section[role="region"]:not(#drawer) {
			transition: none;
			left: 0;
			z-index: 0;
			padding-left: 0;
		}
		section[data-type="sidebar"] + section[role="region"] > header:first-child > button,
		section[data-type="sidebar"] + section[role="region"] > header:first-child > a {
			background-position: 3.5rem center;
		}
		#switches div:last-child label:last-child {
			margin-left: 2rem;
		}
		#switches div:last-child {
			margin-left: 2rem;
		}
		nav[data-type="scrollbar"] {
			padding-top: 1rem;
		}
		nav[data-type="scrollbar"] p {
			opacity: 1;
		}
		#tabs .content {
			padding: 0;
		}
		#tabs .content .content {
			padding: 1.5rem 3rem;
		}
		.detail label+p{
			margin-top:-4.8rem;
			margin-left:5rem;
		}
		.detail p+p{
			margin-top:-0.5rem;
			margin-left:5rem;
			color: #858585;
			font-size:75%;
		}
		#gradesList li a{
			width: calc(100% - 6rem);
		}
		#gradesList li button{
			width: 6rem;
			height: 6rem;
			float:right;
			top:-6rem;
			margin:0;
			border:none;
			font-style:normal;
			line-height:0;
			background-color:transparent;
		}
		#gradesList li button:active{
			background-color:#B2F2FF;
		}
		#gradesList strong{
			font-weight:600;
		}
		[data-type="list"].active #gradesList li:after,
		[data-type="list"] #gradesList li > a:after {
			content: "";
			pointer-events: none;
			position: absolute;
			left: -1.5rem;
			top: 0;
			right: -7.5rem;
			bottom: 0;
		}
		#inputNotes{
			height: calc(100vh - 8rem);
			max-height: calc(100vh - 8rem);
		}
		#viewNote{
			font-size:1.6rem;
		}
		#uSchedule{
			z-index:9998 !important;
		}
		#confirm7.fade-in{
			z-index:9999 !important;
		}
		#listuNotes li{
			max-height: 5rem;
			overflow: hidden;
		}
		[data-type="list"] li > .pack-switch {
		line-height:6rem;
			position: absolute;
			left: 1.5rem;
		}
		[data-type="list"] li > .pack-switch input ~ span:after {
			right: 0;
			left:auto;
		}
		select[multiple]{
			margin:0 0 -2.3rem;
		}
		select[multiple] option{
			display:none;
		}
		#fake-select{
			position: absolute;
			top: 2.7rem;
			left: 1.5rem;
			line-height: 0rem;
			font-size:1.7rem;
		}
		h2.bb-docs {
			font-size: 1.8rem;
			font-weight: 300;
			color: #666;
			margin: -0.1rem 0 0;
			background-color: #f5f5f5;
			padding: 0.4rem 0.4rem 0.4rem 3rem;
			border: solid 0.1rem #e8e8e8;
			margin: 0 0 .5rem;
		}
		nav ul li:last-child{
			margin-bottom:5rem;
		}
		[data-position="day"].right{
			display:none;
		}
	</style>
</head>
<body role="application">
	<section id="index" data-position="current">
		<section data-type="sidebar">
			<header>
				<h1>Menu</h1>
			</header>
			<nav>
				<ul>
					<li><a id="Menu1" href="#" data-l10n-id="subjects">Subjects</a></li>
					<li><a id="Menu2" href="#" data-l10n-id="events">Events</a></li>
					<li><a id="Menu3" href="#" data-l10n-id="grades">Oceny</a></li>
					<li><a id="Menu4" href="#" data-l10n-id="notes">Notes</a></li>
					<li><a id="Menu5" href="#" data-l10n-id="types">Types</a></li>
					<li><a id="Menu6" href="#" data-l10n-id="schedule">Podział godzin</a></li>
					<li><a id="Menu7" href="#" data-l10n-id="settings">Settings</a></li>
				</ul>
			</nav>
		</section>
		<section id="drawer" role="region">
			<header class="fixed">
				<a href="#"><span class="icon icon-menu">hide sidebar</span></a>
				<a href="#drawer"><span class="icon icon-menu">show sidebar</span></a>
				<menu type="toolbar">
					<button id="dSchedule"><span class="icon icon-edit">edit</span></button>
					<button id="abtSchedule"></button>
				</menu>
				<h1 id="title" data-l10n-id="timetable">Plan lekcji</h1>
			</header>
			<div role="main">
				<ul role="tablist" class="bb-tablist">
					<li id="panel1" role="presentation">
						<a id="tab1" href="#" role="tab" data-l10n-id="monday">Poniedziałek</a>
					</li>
					<li id="panel2" role="presentation">
						<a id="tab2" href="#" role="tab" data-l10n-id="tuesday">Wtorek</a>
					</li>
					<li id="panel3" role="presentation">
						<a id="tab3" href="#" role="tab" data-l10n-id="wednesday">Środa</a>
					</li>
					<li id="panel4" role="presentation">
						<a id="tab4" href="#" role="tab" data-l10n-id="thursday">Czwartek</a>
					</li>
					<li id="panel5" role="presentation">
						<a id="tab5" href="#" role="tab" data-l10n-id="friday">Piątek</a>
					</li>
					<li id="panel6" role="presentation">
						<a id="tab6" href="#" role="tab" data-l10n-id="saturday">Sobota</a>
					</li>
					<li id="panel7" role="presentation">
						<a id="tab7" href="#" role="tab" data-l10n-id="sunday">Niedziela</a>
					</li>
				</ul>
			</div>
				<article id="panelo1" data-position="day">
					<section data-type="list">
						<ul id="plane0"></ul>
					</section>
				</article>
				<article id="panelo2" data-position="day">
					<section data-type="list">
						<ul id="plane1"></ul>
					</section>
				</article>
				<article id="panelo3" data-position="day">
					<section data-type="list">
						<ul id="plane2"></ul>
					</section>
				</article>
				<article id="panelo4" data-position="day">
					<section data-type="list">
						<ul id="plane3"></ul>
					</section>
				</article>
				<article id="panelo5" data-position="day">
					<section data-type="list">
						<ul id="plane4"></ul>
					</section>
				</article>
				<article id="panelo6" data-position="day">
					<section data-type="list">
						<ul id="plane5"></ul>
					</section>
				</article>
				<article id="panelo7" data-position="day">
					<section data-type="list">
						<ul id="plane6"></ul>
					</section>
				</article>
		</section>
	 </section>
	 <!-- end index -->
	
	<!-- Plan start -->
	<section role="region" id="vSchedule" data-position="right">
		<header class="fixed">
			<a id="back-index10" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="cSchedule"><span class="icon icon-compose">edit</span></button>
			</menu>
			<h1 id="h1vSchedule">Subject name</h1>
		</header>
		<article class="content scrollable header">
			<header class="fixed">
				<h2 id="h2vSchedule"></h2>
			</header>
			<p id="eitypeShedule"></p>
			<p id="eiroomSchedule"></p>
			<p id="eiteacherSchedule"></p>
			<header class="fixed">
				<h2 id="h2vShedule2" data-l10n-id="grades">Oceny <span onclick="newGrade(document.querySelector('#h1vSchedule').innerHTML)" data-l10n-id="add">Dodaj +</span></h2>
			</header>
			<section data-type="list">
				<ul>
					<li><a id="pvOceny" onclick="pViewSchedule(document.querySelector('#h1vSchedule').innerHTML);" href="#"><p id="eiGradesSchedule"></p></a></li>
				</ul>
			</section>
			<p>
				<header class="fixed">
					<h2 id="h2vShedule3" data-l10n-id="events">Wydarzenia <span onclick="newEvent(document.querySelector('#h1vSchedule').innerHTML)" data-l10n-id="add">Add +</span></h2>
				</header>
				<section data-type="list">
					<ul id="eiEventsPlan"></ul>
				</section>
			</p>
			<input type="hidden" id="vSchedulePlace">
		</article>
	</section>
	
	<section role="region" id="eSchedule" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-index9" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneSchedule" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eSchedule" data-l10n-id="edit-lesson">Edytuj lekcję</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p>
					<select id="subjectSchedule"></select>
					<select id="typeSchedule"></select>
					<select id="hourSchedule"></select>
					<select id="abSchedule">
						<option value="A">A</option>
						<option value="B">B</option>
						<option value="AB">AB</option>
					</select>
					<input id="teacherSchedule" type="text" placeholder="Nauczyciel">
					<input id="roomSchedule" type="text" placeholder="Sala">
					<input id="jSchedule" type="hidden" value="">
				</p>
			</form>
		</article>
	</section>
	
	<section role="region" id="uSchedule" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeSchedule" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteSchedule" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-lesson">Delete lekcje</h1>
		</header>
		<article class="content scrollable header">
			<section>
				<form action="#">
					<ul id="listuSchedule"></ul>
				</form>
			</section>
		</article>
	</section> 
	
	<section id="confirm7" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm1">Czy na pewno usunąć wybrane lekcje?</p>
			</section>
			<menu>
				<button id="btn-cancel7" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete7" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Plan end -->
	
	<!-- Subjects start -->	
	<section role="region" id="subjects" data-position="right">
		<header class="fixed">
			<a id="back-index" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="dSubjects"><span class="icon icon-edit">edit</span></button>
				<button id="aSubject"><span class="icon icon-add">add</span></button>
			</menu>
			<h1 data-l10n-id="subjects">Subjects</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<ul id="przeList"></ul>
			</section>
		</article>
	</section>
	
	<section role="region" id="eSubject" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-subjects" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneSubject" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eSubject" data-l10n-id="edit-subject">Edytuj przedmiot</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<header><h2 data-l10n-id="subject-name">Nazwa przedmiotu</h2></header>
				<p>
					<input id="inputSubject" type="text" placeholder="nazwa przedmiotu">
					<button type="reset">Clear</button>
				</p>
			</form>
		</article>
	</section>
	
	<section role="region" id="uSubjects" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeSubjects" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteSubjects" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-subject">Delete przedmioty</h1>
		</header>
		<article class="content scrollable header">
			<section>
				<form action="#">
					<ul id="listuSubjects"></ul>
				</form>
			</section>
		</article>
	</section> 
	
	<section id="confirm" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm2">Czy na pewno usunąć wybrane przedmioty, wszystkie dane z nimi powiązane zostaną utracone?</p>
			</section>
			<menu>
				<button id="btn-cancel" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Subjects end -->
	
	<!-- Events start-->
	<section role="region" id="events" data-position="right">
		<header class="fixed">
			<a id="back-index2" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="dEvents"><span class="icon icon-edit">edit</span></button>
				<button id="aEvent"><span class="icon icon-add">add</span></button>
			</menu>
			<h1 data-l10n-id="events">Wydarzenia</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<ul id="eventsList"></ul>
			</section>
		</article>
	</section>

	<section role="region" id="eEvent" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-events" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneEvent" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eEvent" data-l10n-id="edit-event">Edit event</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p>
					<input id="inputEvent" type="text" placeholder="Nazwa wydarzenia">
					<label data-l10n-id="hour">Godzina</label>
					<input type="time" id="timeEvent">
					<label data-l10n-id="date">Data</label>
					<input type="date" id="dateEvent">
					<select id="eventSubject"></select>
					<input id="jEvent" type="hidden">
				</p>
			</form>
		</article>
	</section>

	<section role="region" id="uEvents" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeEvents" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteEvents" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-event">Delete events</h1>
		</header>
		<article class="content scrollable header">
			<section>
				<form action="#">
					<ul id="listuEvents"></ul>
				</form>
			</section>
		</article>
	</section> 
	
	<section id="confirm2" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm3">Czy na pewno usunąć wybrane wydarzenia?</p>
			</section>
			<menu>
				<button id="btn-cancel2" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete2" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Events end -->
	
	<!-- Oceny start -->
	<section role="region" id="grades" data-position="right">
		<header class="fixed">
			<a id="back-index3" href="#"><span class="icon icon-back">back</span></a>
			<h1 data-l10n-id="grades">Grades</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<ul id="gradesList"></ul>
			</section>
		</article>
	</section>
	
	<section role="region" id="vGrades" data-position="right">
		<header class="fixed">
			<a id="back-index4" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="dGrades"><span class="icon icon-edit">edit</span></button>
				<button id="aGrade"><span class="icon icon-add">add</span></button>
			</menu>
			<h1 data-l10n-id="grades">Grades</h1>
		</header>
		<article class="content scrollable header">
			<header>
				<h2	id="h2vGrades"></h2>
			</header>
			<section data-type="list">
				<ul id="gradesList2"></ul>
			</section>
		</article>
	</section>
	
	<section role="region" id="eGrade" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-grades" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneGrade" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eGrade" data-l10n-id="edit-grade">Edytuj ocenę</h1>
		</header>
		<article class="content scrollable header">
			<header>
				<h2 id="h2eGrade"></h2>
			</header>
			<form>
				<p>
					<input id="nameGrade" type="text" placeholder="nazwa oceny">
					<input id="inputGrade" type="text" placeholder="ocena">
					<input type="date" id="dateGrade">
					<input type="hidden" id="idGrade">
				</p>
			</form>
		</article>
	</section>

	<section role="region" id="uGrades" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeGrades" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteGrades" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-grade">Delete oceny</h1>
		</header>
		<article class="content scrollable header">
			<header>
				<h2 id="h2uGrades"></h2>
			</header>
			<section>
				<form action="#">
					<ul id="listuOcena"></ul>
				</form>
			</section>
		</article>
	</section> 
	
	<section id="confirm3" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm4">Czy na pewno usunąć wybrane oceny?</p>
			</section>
			<menu>
				<button id="btn-cancel3" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete3" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Oceny end -->
	
	<!-- Notes start -->
	<section role="region" id="notes" data-position="right">
		<header class="fixed">
			<a id="back-index5" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="dNotes"><span class="icon icon-edit">edit</span></button>
				<button id="aNote"><span class="icon icon-add">add</span></button>
			</menu>
			<h1 data-l10n-id="notes">Notes</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<ul id="noteList"></ul>
			</section>
		</article>
	</section>
	
	<section role="region" id="vNotes" data-position="right">
		<header class="fixed">
			<a id="back-index6" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="cNote"><span class="icon icon-compose">edit</span></button>
			</menu>
			<h1 data-l10n-id="notes">Note</h1>
		</header>
		<article class="content scrollable header">
			<p id="viewNote"></p>
		</article>
	</section>

	<section role="region" id="eNote" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-notes" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneNote" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eNote" data-l10n-id="edit-note">Edit note</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p>
					<textarea id="inputNotes" placeholder="Treść notatki"> </textarea>
					<input id="jNotes" type="hidden" value="">
				</p>
			</form>
		</article>
	</section>

	<section role="region" id="uNotes" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeNotes" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteNotes" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-note">Delete notatkę</h1>
		</header>
		<article class="content scrollable header">
			<section>
				<form action="#">
					<ul id="listuNotes"></ul>
				</form>
			</section>
		</article>
	</section> 
		
	<section id="confirm4" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm5">Czy na pewno usunąć wybrane notatki?</p>
			</section>
			<menu>
				<button id="btn-cancel4" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete4" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Notes end -->
	
	<!-- Hours start -->
	<section role="region" id="hours" data-position="right">
		<header class="fixed">
			<a id="back-index7" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="dHours"><span class="icon icon-edit">edit</span></button>
				<button id="aHour"><span class="icon icon-add">add</span></button>
			</menu>
			<h1 data-l10n-id="schedule">Podział godzin</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<ul id="hourList"></ul>
			</section>
		</article>
	</section>

	<section role="region" id="eHour" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-hours" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneHour" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eHour" data-l10n-id="edit-schedule">Edytuj godzinę</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p>
					<label data-l10n-id="hour-start">Godzina rozpoczęcia</label>
					<input id="startHour" type="time">
					<label data-l10n-id="hour-stop">Godzina zakończenia</label>
					<input id="stopHour" type="time">
					<input id="idHour" type="hidden">
				</p>
			</form>
		</article>
	</section>

	<section role="region" id="uHours" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeHours" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteHours" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-schedule">Delete godzinę</h1>
		</header>
		<article class="content scrollable header">
			<section>
				<form action="#">
					<ul id="QHours"></ul>
				</form>
			</section>
		</article>
	</section> 
		
	<section id="confirm5" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm6">Czy na pewno usunąć wybrane godziny?</p>
			</section>
			<menu>
				<button id="btn-cancel5" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete5" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Hours end -->
	
		<!-- Types start -->
	<section role="region" id="types" data-position="right">
		<header class="fixed">
			<a id="back-index8" href="#"><span class="icon icon-back">back</span></a>
			<menu type="toolbar">
				<button id="dTypes"><span class="icon icon-edit">edit</span></button>
				<button id="aType"><span class="icon icon-add">add</span></button>
			</menu>
			<h1 data-l10n-id="types">Types</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<ul id="typesList"></ul>
			</section>
		</article>
	</section>

	<section role="region" id="eType" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-types" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="doneType" data-l10n-id="done">Done</button>
			</menu>
			<h1 id="h1eType" data-l10n-id="edit-type">Edit type</h1>
		</header>
		<article class="content scrollable header">
			<form>
				<p>
					<input id="nameType" type="text" placeholder="Typ">
					<select id="colorType"></select>
					<input id="idType" type="hidden">
				</p>
			</form>
		</article>
	</section>

	<section role="region" id="uTypes" class="skin-organic" data-position="down">
		<header class="fixed">
			<a id="closeTypes" href="#"><span class="icon icon-close">close</span></a>
			<menu type="toolbar">
				<button id="deleteTypes" data-l10n-id="delete">Delete</button>
			</menu>
			<h1 data-l10n-id="delete-type">Delete typ</h1>
		</header>
		<article class="content scrollable header">
			<section>
				<form action="#">
					<ul id="listuTypes"></ul>
				</form>
			</section>
		</article>
	</section> 
		
	<section id="confirm6" data-position="back" class="fullscreen">
		<form role="dialog" data-type="confirm">
			<section>
				<h1 data-l10n-id="confirm">Potwierdzenie</h1>
				<p data-l10n-id="confirm7">Czy na pewno usunąć wybrane typy?</p>
			</section>
			<menu>
				<button id="btn-cancel6" data-l10n-id="cancel">Anuluj</button>
				<button id="btn-delete6" class="danger" data-l10n-id="delete">Delete</button>
			</menu>
		</form>
	</section>
	<!-- Types end -->

	<!-- Settings start-->
	<section role="region" id="settings" class="skin-dark" data-position="right">
		<header class="fixed">
			<a id="back-index11" href="#"><span class="icon icon-back">close</span></a>
			<menu type="toolbar">
				<button id="doneSettings" data-l10n-id="done">Done</button>
			</menu>
			<h1 data-l10n-id="settings">Settings</h1>
		</header>
		<article class="content scrollable header">
			<section data-type="list">
				<h2 class="bb-docs" data-l10n-id="select-days">Wybierz dni</h2>
				<ul>
					<li>
						<select id="setDays" multiple>
							<option data-l10n-id="monday">Poniedziałek</option>
							<option data-l10n-id="tuesday">Wtorek</option>
							<option data-l10n-id="wednesday">Środa</option>
							<option data-l10n-id="thursday">Czwartek</option>
							<option data-l10n-id="friday">Piątek</option>
							<option data-l10n-id="saturday">Sobota</option>
							<option data-l10n-id="sunday">Niedziela</option>
						</select>
						<span id="fake-select"></span>
					</li>
					<li><label class="pack-switch"><input id="sett1" type="checkbox"><span data-l10n-id="setting1">Usuwaj stare wydarzenia</span></label></li>
					<li><label class="pack-switch"><input id="sett2" type="checkbox"><span data-l10n-id="setting2">Pokaż "Dodaj lekcję"</span></label></li>
					<li><label class="pack-switch"><input id="sett3" type="checkbox"><span data-l10n-id="setting3">Pokaż przycisk A/B</span></label></li>
					<li id="aDonate"><a href="#"><p data-l10n-id="donate">Wesprzyj</p></a></li>
					<li><a href="mailto:fx4waldi@yahoo.com"><p data-l10n-id="feedback">Prześlij opinię</p></a></li>
					<li><a href="#"	onclick="window.open('https://marketplace.firefox.com/search?q=waldiPL');"><p data-l10n-id="other-apps">Zobacz inne aplikacje</p></a></li>
					<li><a href="#"><p data-l10n-id="version">Plan Lekcji 1.0</p><p>fx4waldi</p></a></li>
				</ul>
			</section>
		</article>
	</section>
	
	<section role="region" id="donate" data-position="right">
		<header class="fixed">
			<a id="back-index12" href="#"><span class="icon icon-back">back</span></a>
			<h1 data-l10n-id="donate">Wesprzyj</h1>
		</header>
		<article class="content scrollable header">
			<p data-l10n-id="donate1">Jeśli chcesz prześlij dowolną ilość BitCoin na adres:</p><em style="font-size:1.4rem;">1NcavNKW3pf4kzkeqRC6JePpNCz79F82rK</em>
			<p data-l10n-id="donate2">Jeśli chcesz wspomóc projekt w inny sposób skontaktuj się ze mną poprzez "Prześlij opinię".</p>
			<img src="btc.png" alt="1NcavNKW3pf4kzkeqRC6JePpNCz79F82rK"/>
		</article>
	</section>
	<!-- Settings end -->

	<script src="js/app.js"></script>

</body>
</html>